<template>
	<view class="page">
		<u-swiper :list="info.images" height="500"></u-swiper>

		<view style="padding: 30rpx;">
			<view style="font-size: 32rpx;font-weight: bold;">{{info.goodsName}}</view>
			<view style="margin-top: 10rpx;" class="u-flex u-row-between">
				<view style="color: #FF7E01;font-size: 36rpx;">￥{{info.price}}</view>
				<view style="color: #999">仅剩{{info.sku}}件</view>
			</view>
		</view>

		<view class="bg" v-if="priceTable.length">
			<u-image src="/static/priceTop.png" width="690" height="68"></u-image>

			<view class="priceBlock">
				<view v-for="(item,index) in priceTable" :key="index" class="u-flex u-row-between">
					<view style="width: 100rpx;text-align: center;color: #FFFFFF;">
						<view>单价</view>
						<view>数量</view>
					</view>
					<view class="priceTable">
						<view v-for="(item1,index1) in item" :key="index1" class="Table">
							<view style="color: #FF7E01;font-size:34rpx;">￥{{item1.price}}</view>
							<view>{{item1.num}}件</view>
						</view>
					</view>

				</view>
			</view>


		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


	<!-- 	<u-cell-group>
			<u-cell-item title="运费" :arrow="false" :value="'￥'+info.expressFee"></u-cell-item>
		</u-cell-group> -->

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>

		<view class="u-margin-20">
			<title txt="详情介绍"></title>
		</view>

		<u-parse :html="info.detail"></u-parse>


		<view class="navigation">
			<view class="left">
				<view class="item" @click="backHome">
					<u-icon name="home" :size="40"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>
				<view class="item car" :class="israte?'rate':''" @click="goCar">
					<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>

			<view class="right">
				<view class="cart btn u-line-1" @click="addCar">加购物车</view>
				<view class="gray btn u-line-1" @click="buy">立即购买</view>
			</view>
		</view>

		<size ref="chilren" @carnum="carnum()"></size>
		
	</view>
</template>

<script>
	import size from '@/components/size.vue';
	import title from '../../components/title.vue';
	export default {
		components: {
			title,
			size
		},
		data() {
			return {
				info: {

				},
				priceTable: [],
				count: ""
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			
			
			
            this.carnum()
			this.get()
		},
		methods: {
			carnum(){
				this.$u.api.carNum().then(res => {
				  this.count=res.data.cartNum	
				})
			},
			addCar(){
				this.$refs.chilren.show = true;
							this.$refs.chilren.statusing = 1;
							setTimeout(() => {
								this.$refs.chilren.info = this.info
				}, 0)
			
			},
			buy(){
				this.$refs.chilren.show = true;
									this.$refs.chilren.statusing = 2;
									setTimeout(() => {
										this.$refs.chilren.info = this.info
						}, 0)
			},
			backHome() {
				uni.switchTab({
					url: "../../pages/index/index"
				})
			},
			goCar() {
				uni.navigateTo({
					url: "../car/index"
				})
			},
			get() {
				this.$u.post('/api/index/goodsDetail', {
					goods_id: this.id
				}).then(res => {
					this.info = res.data;
					var data = res.data.priceTable;
					var result = [];
					for (var i = 0; i < data.length; i += 3) {
						result.push(data.slice(i, i + 3));
					}
					console.log(result)
					this.priceTable = result;
				}).catch(err => {

				})
			},

		}
	}
</script>


<style lang="scss">
	.page {
		padding-bottom: 120rpx;
	}

	.bg {
		width: 690rpx;
		background: #037705;
		margin: auto;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

	}

	.priceBlock {
		padding: 20rpx;
	}

	.priceTable {
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx 0;
		width: 550rpx;
		display: flex;
		margin: 20rpx 0;
		border-radius: 10rpx;

		.Table {
			width: 33.3%;
		}

	}

	.call {
		width: 80rpx;
		height: 40rpx;
		background: #037705;
		border-radius: 30rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-left: 20rpx;
	}



	.navigation {

		display: flex;

		margin-top: 100rpx;

		border: solid 2rpx #f2f2f2;

		background-color: #ffffff;

		padding: 16rpx 0;

		position: fixed;

		bottom: 0;

		width: 100%;
		z-index: 999;






		.left {

			display: flex;

			font-size: 20rpx;



			.item {

				margin: 0 30rpx;



				&.car {

					text-align: center;

					position: relative;



					.car-num {

						position: absolute;

						top: -10rpx;

						right: -10rpx;

					}

				}

			}



			.item:active {

				opacity: 0.6;

			}

		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				padding: 20rpx 30rpx;
				color: #ffffff;
				width: 250rpx;
				text-align: center;
			}

			.cart {
				background-color: #FFB850;
				border-radius: 40rpx 0 0 40rpx;

			}

			.gray {
				background-color: #FF6450;
				border-radius: 0 40rpx 40rpx 0;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
